const path = require('path');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const TsCheckerPlugin = require('fork-ts-checker-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const buildPath = path.resolve(__dirname, 'dist');
const srcPath = path.resolve(__dirname, 'src');
const srcPublic = path.resolve(__dirname, 'public');

const isDev = process.env.NODE_ENV === 'development';

const styleSettings = (module = false) => [
    isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
    !module
        ? 'css-loader'
        : {
              loader: 'css-loader',
              options: {
                  modules: {
                      localIdentName: isDev ? '[path][name]__[local]' : '[contenthash:base64]',
                  },
              },
          },
    {
        loader: 'postcss-loader',
        options: {
            postcssOptions: {
                plugins: ['autoprefixer'],
            },
        },
    },
    {
        loader: 'sass-loader',
        options: {
            additionalData: (content, loaderContext) => {
                const { resourcePath } = loaderContext;

                return resourcePath.includes('.module.scss')
                    ? '@import "src/styles/variables.scss";\n @import "src/styles/mixins.scss";\n' + content
                    : content;
            },
        },
    },
];

module.exports = {
    entry: path.join(srcPath, './index.tsx'),
    target: isDev ? 'web' : 'browserslist',
    devtool: isDev ? 'eval-source-map' : 'hidden-source-map',
    output: {
        path: buildPath,
        filename: 'bundle.js',
        publicPath:'/'
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: path.join(srcPublic, 'index.html'),
        }),
        isDev && new ReactRefreshWebpackPlugin(),
        !isDev && new MiniCssExtractPlugin({ filename: '[name]-[contenthash].css' }),
        new TsCheckerPlugin(),
        new FaviconsWebpackPlugin({ logo: path.join(srcPublic, 'GithubIcon.png') }),
        new Dotenv({ systemvars: true }),
    ].filter(Boolean),
    module: {
        rules: [
            {
                test: /\.module\.s?css$/,
                use: styleSettings(true),
            },
            {
                test: /\.s?css$/,
                exclude: /\.module\.s?css$/,
                use: styleSettings(),
            },
            {
                test: /\.[tj]sx?$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
            {
                test: /\.(png|jpg|svg|woff2)$/,
                type: 'asset',
            },
        ],
    },
    resolve: {
        roots: ['./src'],
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
        alias: {
            hooks: path.join(srcPath, 'hooks'),
            components: path.join(srcPath, 'components'),
            assets: path.join(srcPath, 'assets'),
            configs: path.join(srcPath, 'configs'),
            App: path.join(srcPath, 'App'),
            store: path.join(srcPath, 'store'),
            utils: path.join(srcPath, 'utils'),
            context: path.join(srcPath, 'context'),
        },
    },
    devServer: {
        host: 'localhost',
        port: 5173,
        hot: true,
        historyApiFallback: true,
    },
};
